<template>
  <view class="gridItem">
    <view :class="className"></view>
    <text>{{title}}</text>
  </view>
</template>

<script>
  export default {
    name: "gridItem",
    data() {
      return {

      };
    },
    props: {
      className: {
        required: true,
          type: String
      },
      title: {
        required: true,
        type: String
      }
    }
  }
</script>

<style lang="scss">
  .gridItem {
    width: 150rpx;
    height: 140rpx;
    text-align: center;
    font-size: 24rpx;

    .iconfont {
      font-size: 70rpx;
      margin-bottom: 20rpx;
    }

    .icon-position {
      color: #33E4A1;
    }

    .icon-ptJob {
      color: #FCC247;
    }

    .icon-new {
      color: #FA685F;
    }

    .icon-hytp {
      color: #FA685F;
    }

    .icon-more,.icon-upLoad {
      color: $uni-color-primary;
    }

    .icon-gxyx {
      color: #41C9F9;
    }

    .icon-rmgs {
      color: #FA7B6E;
    }

    .icon-zwfl {
      color: #FEB436;
    }

    .icon-xszq {
      color: #1FAAFF;
    }

    .icon-cgz {
      color: #4DCFBC;
    }
    .icon-resume {
      color: #FBCA40;
    }
    .icon-jobSub {
      color: #60ADFF;
    }
    .icon-wdms{
      color: #FB6A63;
    }
  }
</style>
